<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#sub_menu_1,#sub_menu_2{
			display: none;
		}
		ul li:hover{
			cursor: pointer;
		}
	</style>
</head>
<body>
	<ul>
		<li onclick = "f('sub_menu_1')">一级菜单1
			<ul id="sub_menu_1">
				<li>二级餐单1</li>
				<li>二级餐单1</li>
				<li>二级餐单1</li>
				<li>二级餐单1</li>
			</ul>
		</li>
		<li onclick="f('sub_menu_2')">一级菜单2
			<ul id="sub_menu_2">
				<li>二级菜单2</li>
				<li>二级菜单2</li>
				<li>二级菜单2</li>
				<li>二级菜单2</li>
			</ul>
 
		</li>
		<li>一级餐单3</li>
	</ul>
	<script type="text/javascript">
		function f(str){
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "block")
                    sub_menu.style.display = "none";
                else
                    sub_menu.style.display = "block";
                    
            }
		
	</script>
</body>
</html>